<!--
 * @Descripttion:
 * @Author: caijj
 * @Date: 2020-12-11 11:05:10
 * @LastEditors: caijj
 * @LastEditTime: 2020-12-23 15:19:09
-->
<template>
  <div class="form-item">
    <span v-if="isText" class="el-text">{{ currentVal || '-' }}</span>
    <!-- 普通输入框 -->
    <el-input
      v-if="isInput"
      v-model="currentVal"
      v-bind="bindTagProps"
      style="width:100%;"
      v-on="bindEvents"
    />
    <!-- 普通下拉选择框 -->
    <el-select
      v-if="isSelect"
      v-model="currentVal"
      v-bind="bindTagProps"
      :clearable="false"
      style="width:100%;"
      v-on="bindEvents"
    >
      <el-option
        v-for="item in itemProps.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <!-- 输入框、下拉框 -->
    <el-input
      v-if="isSelectInput"
      v-model="currentVal[0]"
      v-bind="bindTagProps"
      style="width:100%;"
      v-on="bindEvents"
    >
      <el-select
        slot="append"
        v-model="currentVal[1]"
        placeholder="请选择"
        style="width:150px;"
      >
        <el-option
          v-for="item in itemProps.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-input>
    <div v-if="isImgePreview" class="image-preview">
      <img :src="currentVal" alt="图片加载失败">
    </div>
    <!-- 上传照片 -->
    <div>
      <el-upload
        v-if="isImgUpload"
        ref="avatar-uploader"
        class="avatar-uploader"
        accept=".jpg, .jpeg, .png"
        :headers="headers"
        :action="itemProps.action"
        :show-file-list="false"
        :on-success="handleImageUploadSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imgUrl" :src="imgUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';

export default {
  components: {},
  inheritAttrs: false,
  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: [String, Number, Array, Object],
    itemProps: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      headers: { token: '' },
      imageUrl: ''
    };
  },
  computed: {
    // 双向绑定数据值
    currentVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    },
    imgUrl() {
      if (!this.imageUrl && this.itemProps.element === 'img-upload') {
        return this.value;
      } else {
        return this.imageUrl;
      }
    },
    // 绑定元素属性
    bindTagProps() {
      return this.itemProps;
    },
    // 绑定方法
    bindEvents() {
      return this.itemProps.events || {};
    },
    isText() {
      return this.itemProps.element === 'text';
    },
    // el-input
    isInput() {
      return this.itemProps.element === 'el-input';
    },
    // el-select
    isSelect() {
      return this.itemProps.element === 'el-select';
    },
    isSelectInput() {
      return this.itemProps.element === 'el-input-select';
    },
    isImgUpload() {
      return this.itemProps.element === 'img-upload';
    },
    isImgePreview() {
      return this.itemProps.element === 'img-preview';
    }
  },
  methods: {
    handleImageUploadSuccess(res, file) {
      console.log(222);
      const { resultMessage, resultCode, data } = res;
      if (resultCode === '100401') {
        this.$message.error(resultMessage);
        this.$nextTick(() => {
          this.$store.dispatch('user/logout').then(() => {
            location.reload();
          });
        });
      }
      this.$message.success(resultMessage);
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$emit('input', data);
    },
    beforeAvatarUpload(file) {
      this.headers.token = getToken();
      const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return isJPG && isLt5M;
    },
    clear() {
      this.$refs['avatar-uploader'].clearFiles();
      // this.$refs.upload.uploadFiles.length = 0;
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
::v-deep .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.image-preview {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  object-fit: contain;
  >img{
    display: inline-block;
    width:100%;
    height: 100%;
  }
}
.el-text {
  width: 100%;
  word-break: break-word;
  color: #7d848e;
}
</style>
